import React, { memo, useMemo, ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { useAppDispatch } from '@/store'
import { changeAlbumListSongAction } from '@/views/player/store/player'
import { AlbumItemWrapper } from './style'
import { getImageSize } from '@/utils/format'

interface IProps {
  children?: ReactNode
  albumData: any
}

const AlbumItemV1: React.FC<IProps> = (props) => {
  const { albumData } = props
  const dispatch = useAppDispatch()
  function getAlbumList(id: number): void {
    dispatch(changeAlbumListSongAction(id))
  }
  const albumLink = useMemo(() => {
    return '/album?id=' + albumData.id
  }, [albumData])
  return (
    <AlbumItemWrapper>
      <div className="top">
        <img
          src={getImageSize(albumData.picUrl, 100, 100)}
          alt={albumData.picUrl}
        />
        <Link to={albumLink}>
          <span className="cover sprite_cover"></span>
        </Link>
        <i
          className="cover sprite_icon play"
          onClick={() => getAlbumList(albumData.id)}
        ></i>
      </div>
      <div className="bottom">
        <Link to={albumLink}>
          <p className="name">{albumData.name}</p>
          <p className="artist">{albumData.artist.name}</p>
        </Link>
      </div>
    </AlbumItemWrapper>
  )
}

export default memo(AlbumItemV1)
